'use client';
import { useTranslation } from 'react-i18next';
import { Fragment, useCallback } from 'react';
import { RiAddLine, RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react';
import { Menu, Transition } from '@headlessui/react';
import { useNavigate } from 'react-router-dom';
import { debounce } from 'lodash-es';
import cn from '@/utils/classnames';
import AppIcon from '@/app/components/base/app-icon';
import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication';
import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel';
import { useAppContext } from '@/context/app-context';
import { useStore as useAppStore } from '@/app/components/app/store';
import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files';
import type { AppIconType } from '@/types/app';

export type NavItem = {
  id: string;
  name: string;
  link: string;
  icon_type: AppIconType | null;
  icon: string;
  icon_background: string;
  icon_url: string | null;
  mode?: string;
};
export type INavSelectorProps = {
  navs: NavItem[];
  curNav?: Omit<NavItem, 'link'>;
  createText: string;
  isApp?: boolean;
  onCreate: (state: string) => void;
  onLoadmore?: () => void;
};

const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }: INavSelectorProps) => {
  const { t } = useTranslation();
  const router = useNavigate();
  const { isCurrentWorkspaceEditor } = useAppContext();
  const setAppDetail = useAppStore((state) => state.setAppDetail);

  const handleScroll = useCallback(
    debounce((e) => {
      if (typeof onLoadmore === 'function') {
        const { clientHeight, scrollHeight, scrollTop } = e.target;

        if (clientHeight + scrollTop > scrollHeight - 50) onLoadmore();
      }
    }, 50),
    [],
  );

  return (
    <div className="">
      <Menu as="div" className="relative inline-block text-left">
        {({ open }) => (
          <>
            <Menu.Button
              className={cn(
                'group inline-flex items-center w-full h-7 justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active hover:hover:bg-components-main-nav-nav-button-bg-active-hover',
                open && 'bg-components-main-nav-nav-button-bg-active',
              )}
            >
              <div className="max-w-[180px] truncate" title={curNav?.name}>
                {curNav?.name}
              </div>
              <RiArrowDownSLine
                className={cn('shrink-0 w-3 h-3 ml-1 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
                aria-hidden="true"
              />
            </Menu.Button>
            <Menu.Items
              className="
                absolute -left-11 right-0 mt-1.5 w-60 max-w-80
                divide-y divide-gray-100 origin-top-right rounded-lg bg-white
                shadow-lg
              "
            >
              <div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
                {navs.map((nav) => (
                  <Menu.Item key={nav.id}>
                    <div
                      className="flex items-center w-full px-3 py-[6px] text-gray-700 text-[14px] rounded-lg font-normal hover:bg-gray-100 cursor-pointer truncate"
                      onClick={() => {
                        if (curNav?.id === nav.id) return;
                        setAppDetail();
                        router(nav.link);
                      }}
                      title={nav.name}
                    >
                      <div className="relative w-6 h-6 mr-2 rounded-md">
                        <AppIcon
                          size="tiny"
                          iconType={nav.icon_type}
                          icon={nav.icon}
                          background={nav.icon_background}
                          imageUrl={nav.icon_url}
                        />
                        {!!nav.mode && (
                          <span
                            className={cn(
                              'absolute w-3.5 h-3.5 -bottom-0.5 -right-0.5 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm',
                            )}
                          >
                            {nav.mode === 'advanced-chat' && <ChatBot className="w-2.5 h-2.5 text-[#1570EF]" />}
                            {nav.mode === 'agent-chat' && <CuteRobot className="w-2.5 h-2.5 text-indigo-600" />}
                            {nav.mode === 'chat' && <ChatBot className="w-2.5 h-2.5 text-[#1570EF]" />}
                            {nav.mode === 'completion' && <AiText className="w-2.5 h-2.5 text-[#0E9384]" />}
                            {nav.mode === 'workflow' && <Route className="w-2.5 h-2.5 text-[#f79009]" />}
                          </span>
                        )}
                      </div>
                      <div className="truncate">{nav.name}</div>
                    </div>
                  </Menu.Item>
                ))}
              </div>
              {!isApp && isCurrentWorkspaceEditor && (
                <Menu.Button className="p-1 w-full">
                  <div
                    onClick={() => onCreate('')}
                    className={cn('flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100')}
                  >
                    <div className="shrink-0 flex justify-center items-center w-6 h-6 bg-gray-50 rounded-[6px] border-[0.5px] border-gray-200 border">
                      <RiAddLine className="w-4 h-4 text-gray-500" />
                    </div>
                    <div className="grow text-left font-normal text-[14px] text-gray-700">{createText}</div>
                  </div>
                </Menu.Button>
              )}
              {isApp && isCurrentWorkspaceEditor && (
                <Menu as="div" className="relative w-full h-full">
                  {({ open }) => (
                    <>
                      <Menu.Button className="p-1 w-full">
                        <div
                          className={cn(
                            'flex items-center gap-2 px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100',
                            open && '!bg-gray-100',
                          )}
                        >
                          <div className="shrink-0 flex justify-center items-center w-6 h-6 bg-gray-50 rounded-[6px] border-[0.5px] border-gray-200 border">
                            <RiAddLine className="w-4 h-4 text-gray-500" />
                          </div>
                          <div className="grow text-left font-normal text-[14px] text-gray-700">{createText}</div>
                          <RiArrowRightSLine className="shrink-0 w-3.5 h-3.5  text-gray-500" />
                        </div>
                      </Menu.Button>
                      <Transition
                        as={Fragment}
                        enter="transition ease-out duration-100"
                        enterFrom="transform opacity-0 scale-95"
                        enterTo="transform opacity-100 scale-100"
                        leave="transition ease-in duration-75"
                        leaveFrom="transform opacity-100 scale-100"
                        leaveTo="transform opacity-0 scale-95"
                      >
                        <Menu.Items
                          className={cn(
                            'absolute top-[3px] right-[-198px] min-w-[200px] z-10 bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg',
                          )}
                        >
                          <div className="p-1">
                            <div
                              className={cn(
                                'flex items-center px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100 text-gray-700 font-normal',
                              )}
                              onClick={() => onCreate('blank')}
                            >
                              <FilePlus01 className="shrink-0 mr-2 w-4 h-4 text-gray-600" />
                              {t('app.newApp.startFromBlank')}
                            </div>
                            <div
                              className={cn(
                                'flex items-center px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100 text-gray-700 font-normal',
                              )}
                              onClick={() => onCreate('template')}
                            >
                              <FilePlus02 className="shrink-0 mr-2 w-4 h-4 text-gray-600" />
                              {t('app.newApp.startFromTemplate')}
                            </div>
                          </div>
                          <div className="p-1 border-t border-gray-100">
                            <div
                              className={cn(
                                'flex items-center px-3 py-[6px] rounded-lg cursor-pointer hover:bg-gray-100 text-gray-700 font-normal',
                              )}
                              onClick={() => onCreate('dsl')}
                            >
                              <FileArrow01 className="shrink-0 mr-2 w-4 h-4 text-gray-600" />
                              {t('app.importDSL')}
                            </div>
                          </div>
                        </Menu.Items>
                      </Transition>
                    </>
                  )}
                </Menu>
              )}
            </Menu.Items>
          </>
        )}
      </Menu>
    </div>
  );
};

export default NavSelector;
